<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片素材测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        .section {
            background: white;
            margin: 20px 0;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .section h2 {
            color: #1455ff;
            margin-bottom: 15px;
        }
        .image-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
        }
        .image-item {
            text-align: center;
        }
        .image-item img {
            width: 100%;
            height: 150px;
            object-fit: cover;
            border-radius: 8px;
            border: 1px solid #ddd;
        }
        .image-item p {
            margin: 8px 0 0 0;
            font-size: 14px;
            color: #666;
        }
        .small-images {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        .small-images img {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 50%;
            border: 2px solid #ddd;
        }
    </style>
</head>
<body>
    <h1>领航App - Unsplash图片素材测试</h1>
    
    <div class="section">
        <h2>首页 - 轮播图</h2>
        <div class="image-grid">
            <div class="image-item">
                <img src="https://images.unsplash.com/photo-1540979388789-6cee28a1cdc9?w=700&h=360&fit=crop&crop=center" alt="低空经济宣传视频">
                <p>低空经济宣传视频</p>
            </div>
            <div class="image-item">
                <img src="https://images.unsplash.com/photo-1436491865332-7a61a109cc05?w=700&h=360&fit=crop&crop=center" alt="低空经济+文旅图文政策解读">
                <p>低空经济+文旅图文政策解读</p>
            </div>
            <div class="image-item">
                <img src="https://images.unsplash.com/photo-1569629743817-70d8db6c323b?w=700&h=360&fit=crop&crop=center" alt="企业介绍视频">
                <p>企业介绍视频</p>
            </div>
        </div>
    </div>

    <div class="section">
        <h2>首页 - 服务分类图标</h2>
        <div class="small-images">
            <img src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=56&h=56&fit=crop&crop=center" alt="低空文旅">
            <img src="https://images.unsplash.com/photo-1503676260728-1c00da094a0b?w=56&h=56&fit=crop&crop=center" alt="低空研学">
            <img src="https://images.unsplash.com/photo-1504280390367-361c6d9f38f4?w=56&h=56&fit=crop&crop=center" alt="营地建设">
            <img src="https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=56&h=56&fit=crop&crop=center" alt="更多服务">
        </div>
    </div>

    <div class="section">
        <h2>首页 - 热门机型</h2>
        <div class="image-grid">
            <div class="image-item">
                <img src="https://images.unsplash.com/photo-1578662996442-48f60103fc96?w=600&h=300&fit=crop&crop=center" alt="鹊飞ZG-ONE">
                <p>鹊飞ZG-ONE</p>
            </div>
            <div class="image-item">
                <img src="https://images.unsplash.com/photo-1473968512647-3e447244af8f?w=600&h=300&fit=crop&crop=center" alt="锐翔RX1E">
                <p>锐翔RX1E</p>
            </div>
        </div>
    </div>

    <div class="section">
        <h2>景区页面 - 热门路线</h2>
        <div class="image-grid">
            <div class="image-item">
                <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=700&h=300&fit=crop&crop=center" alt="九寨沟空中观光之旅">
                <p>九寨沟空中观光之旅</p>
            </div>
            <div class="image-item">
                <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=700&h=300&fit=crop&crop=center" alt="张家界峰林飞行体验">
                <p>张家界峰林飞行体验</p>
            </div>
            <div class="image-item">
                <img src="https://images.unsplash.com/photo-1464822759844-d150baec93c5?w=700&h=300&fit=crop&crop=center" alt="黄山云海日出专线">
                <p>黄山云海日出专线</p>
            </div>
        </div>
    </div>

    <div class="section">
        <h2>培训页面 - 培训课程</h2>
        <div class="image-grid">
            <div class="image-item">
                <img src="https://images.unsplash.com/photo-1473968512647-3e447244af8f?w=200&h=200&fit=crop&crop=center" alt="小型无人机培训">
                <p>小型无人机培训</p>
            </div>
            <div class="image-item">
                <img src="https://images.unsplash.com/photo-1578662996442-48f60103fc96?w=200&h=200&fit=crop&crop=center" alt="中型无人机培训">
                <p>中型无人机培训</p>
            </div>
            <div class="image-item">
                <img src="https://images.unsplash.com/photo-1540979388789-6cee28a1cdc9?w=200&h=200&fit=crop&crop=center" alt="载人飞行器培训">
                <p>载人飞行器培训</p>
            </div>
            <div class="image-item">
                <img src="https://images.unsplash.com/photo-1569629743817-70d8db6c323b?w=200&h=200&fit=crop&crop=center" alt="教员培训学习">
                <p>教员培训学习</p>
            </div>
        </div>
    </div>

    <div class="section">
        <h2>个人中心 - 用户头像和图标</h2>
        <div class="small-images">
            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=120&h=120&fit=crop&crop=center" alt="用户头像">
            <img src="https://images.unsplash.com/photo-1495055154266-57bbdeada43e?w=44&h=44&fit=crop&crop=center" alt="设置图标">
            <img src="https://images.unsplash.com/photo-1516387938699-a93567ec168e?w=60&h=60&fit=crop&crop=center" alt="我的收藏">
            <img src="https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=60&h=60&fit=crop&crop=center" alt="优惠券">
        </div>
    </div>

    <div class="section">
        <h2>图片加载状态检查</h2>
        <p>请检查上述所有图片是否正常加载。如果有图片无法显示，可能需要调整Unsplash的URL参数或选择其他图片。</p>
        <p><strong>注意：</strong>所有图片均来自Unsplash，具有高质量和专业性，符合航空、旅游、培训等主题。</p>
    </div>
</body>
</html>
